<template>
  <div class="student-dashboard">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <el-card class="welcome-card" shadow="hover">
        <div class="welcome-content">
          <div class="welcome-text">
            <h1>欢迎回来，{{ userStore.userName }}！</h1>
            <p class="welcome-subtitle">{{ userStore.userMajor }} - {{ userStore.userClass }}</p>
            <p class="current-time">{{ currentTime }}</p>
          </div>
          <div class="welcome-avatar">
            <el-avatar :size="80" :src="userStore.userInfo?.avatar">
              <el-icon size="40"><UserFilled /></el-icon>
            </el-avatar>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-section">
      <el-row :gutter="24">
        <el-col :lg="6" :md="12" :sm="24">
          <ResultCard
            type="primary"
            :icon="Document"
            title="题目查重次数"
            :main-value="stats.titleCheckCount"
            unit="次"
            description="累计查重次数"
            :actions="[{ key: 'view', label: '查看', type: 'text' }]"
            @action="goToTitleCheck"
            clickable
          />
        </el-col>
        <el-col :lg="6" :md="12" :sm="24">
          <ResultCard
            type="success"
            :icon="Files"
            title="论文查重次数"
            :main-value="stats.paperCheckCount"
            unit="次"
            description="PDF查重次数"
            :actions="[{ key: 'view', label: '查看', type: 'text' }]"
            @action="goToPaperCheck"
            clickable
          />
        </el-col>
        <el-col :lg="6" :md="12" :sm="24">
          <ResultCard
            type="warning"
            :icon="DataAnalysis"
            title="信息提取次数"
            :main-value="stats.extractionCount"
            unit="次"
            description="论文信息提取"
            :actions="[{ key: 'view', label: '查看', type: 'text' }]"
            @action="goToInfoExtraction"
            clickable
          />
        </el-col>
        <el-col :lg="6" :md="12" :sm="24">
          <ResultCard
            type="info"
            :icon="Clock"
            title="最近查重"
            :main-value="getLastCheckDisplay"
            unit=""
            :description="getLastCheckDescription"
            :main-value-size="14" 
            clickable
          />
        </el-col>
      </el-row>
    </div>

    <el-row :gutter="24">
      <!-- 快速操作 -->
      <el-col :lg="8" :md="12" :sm="24">
        <el-card class="quick-actions-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#409EFF">
                <Operation />
              </el-icon>
              <span>快速操作</span>
            </div>
          </template>

          <div class="quick-actions">
            <div class="action-item" @click="quickTitleCheck">
              <div class="action-icon">
                <el-icon size="24" color="#67C23A">
                  <Document />
                </el-icon>
              </div>
              <div class="action-content">
                <h4>题目查重</h4>
                <p>检查论文题目重复情况</p>
              </div>
              <el-icon class="action-arrow">
                <ArrowRight />
              </el-icon>
            </div>

            <div class="action-item" @click="quickPaperCheck">
              <div class="action-icon">
                <el-icon size="24" color="#E6A23C">
                  <Files />
                </el-icon>
              </div>
              <div class="action-content">
                <h4>论文查重</h4>
                <p>上传PDF进行内容查重</p>
              </div>
              <el-icon class="action-arrow">
                <ArrowRight />
              </el-icon>
            </div>

            <div class="action-item" @click="quickInfoExtraction">
              <div class="action-icon">
                <el-icon size="24" color="#409EFF">
                  <DataAnalysis />
                </el-icon>
              </div>
              <div class="action-content">
                <h4>信息提取</h4>
                <p>AI提取论文关键信息</p>
              </div>
              <el-icon class="action-arrow">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 最近查重记录 -->
      <el-col :lg="16" :md="12" :sm="24">
        <el-card class="recent-records-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#909399">
                <Clock />
              </el-icon>
              <span>最近查重记录</span>
              <el-button type="text" @click="refreshRecords">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
          </template>

          <div v-if="recentRecords.length > 0" class="records-list">
            <div
              v-for="record in recentRecords"
              :key="record.id"
              class="record-item"
            >
              <div class="record-icon">
                <el-icon :color="getRecordIconColor(record.type)">
                  <Document v-if="record.type === 'title'" />
                  <Files v-else-if="record.type === 'paper'" />
                  <DataAnalysis v-else />
                </el-icon>
              </div>
              <div class="record-content">
                <h4>{{ getDisplayTitle(record) }}</h4>
                <p>{{ getRecordTypeText(record.type) }} · {{ formatDateTime(record.time) }}</p>
              </div>
              <div class="record-result">
                <el-tag :type="getResultTagType(record.similarity)">
                  {{ record.type === 'extraction' ? '完成' : record.similarity + '%' }}
                </el-tag>
              </div>
            </div>
          </div>

          <el-empty v-else description="暂无查重记录" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24">
      <el-col :lg="24">
        <el-card class="external-check-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <el-icon size="20" color="#67C23A">
                <Link />
              </el-icon>
              <span>其他查重方式</span>
              <el-tag type="success" size="small">权威推荐</el-tag>
            </div>
          </template>

          <div class="external-check-list">
            <div
              v-for="method in externalCheckMethods"
              :key="method.id"
              class="check-method-item"
              @click="openExternalWebsite(method.url)"
            >
              <div class="method-icon">
                <el-icon size="24" :color="method.color">
                  <component :is="method.icon" />
                </el-icon>
              </div>
              <div class="method-content">
                <h4>{{ method.name }}</h4>
                <p>{{ method.description }}</p>
                <div class="method-tags">
                  <el-tag
                    v-for="tag in method.tags"
                    :key="tag"
                    :type="getTagType(tag)"
                    size="small"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>  
              <div class="method-action">
                <el-button type="primary" link>
                  访问官网
                  <el-icon><ArrowRight /></el-icon>
                </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统公告 -->
    <el-card class="announcement-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon size="20" color="#F56C6C">
            <Bell />
          </el-icon>
          <span>系统公告</span>
        </div>
      </template>

      <div class="announcements">
        <div
          v-for="announcement in announcements"
          :key="announcement.id"
          class="announcement-item"
        >
          <el-tag
            :type="announcement.type"
            size="small"
            class="announcement-tag"
          >
            {{ announcement.category }}
          </el-tag>
          <span class="announcement-title">{{ announcement.title }}</span>
          <span class="announcement-time">{{ formatDateTime(announcement.time) }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import {
  UserFilled,
  Document,
  Files,
  DataAnalysis,
  Clock,
  Operation,
  ArrowRight,
  Refresh,
  Bell,
  Link,
  Star,
  School,
  MapLocation,
  Promotion,
  Trophy
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useAppStore } from '@/stores/app'
import { formatDateTime } from '@/utils'
import { 
  getTitleCheckStats,
  getExtractionStats,
  getRecentRecords
} from '@/api/student'
import ResultCard from '@/components/ResultCard.vue'

const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()

// 当前时间
const currentTime = ref('')

// 统计数据
const stats = ref({
  titleCheckCount: 0,
  paperCheckCount: 0,
  extractionCount: 0,
  lastCheckDays: 0,
  lastCheckTime: null,
  lastCheckType: null
})

// 最近记录
const recentRecords = ref([])

// 计算最近查重的显示值
const getLastCheckDisplay = computed(() => {
  if (stats.value.lastCheckTime) {
    return formatDateTime(stats.value.lastCheckTime, 'MM-DD HH:mm')
  } else if (stats.value.lastCheckDays > 0) {
    return `${stats.value.lastCheckDays}天前`
  } else {
    return '暂无记录'
  }
})

// 计算最近查重的描述
const getLastCheckDescription = computed(() => {
  if (stats.value.lastCheckTime) {
    const checkType = stats.value.lastCheckType === 'title' ? '题目查重' : 
                     stats.value.lastCheckType === 'extraction' ? '信息提取' : '查重'
    return `上次${checkType}: ${formatDateTime(stats.value.lastCheckTime, 'YYYY-MM-DD HH:mm')}`
  } else if (stats.value.lastCheckDays > 0) {
    return `距离上次查重: ${stats.value.lastCheckDays}天`
  } else {
    return '尚未进行查重'
  }
})

// 系统公告
const announcements = ref([
  {
    id: 1,
    type: 'success',
    category: '系统更新',
    title: '查重系统性能优化，查重速度提升30%',
    time: '2025-10-10T10:30:00'
  },
  {
    id: 2,
    type: 'warning',
    category: '使用提醒',
    title: '毕业论文提交截止时间：2026年5月30日',
    time: '2025-10-10T14:20:00'
  },
  {
    id: 3,
    type: 'info',
    category: '功能说明',
    title: '新增AI信息提取功能，支持自动提取论文关键信息',
    time: '2025-10-10T09:15:00'
  }
])

// 其他查重方式
const externalCheckMethods = ref([
  {
    id: 1,
    name: '中国知网查重',
    description: '国内最权威的学术不端检测系统，高校普遍采用',
    url: 'https://check.cnki.net/',
    icon: School,
    color: '#E64A19',
    tags: ['权威', '高校认可', '官方']
  },
  {
    id: 2,
    name: '万方数据查重',
    description: '万方数据推出的论文相似性检测服务',
    url: 'https://check.wanfangdata.com.cn/',
    icon: Document,
    color: '#1976D2',
    tags: ['官方', '可靠', '快速']
  },
  {
    id: 3,
    name: '维普查重',
    description: '维普论文检测系统，覆盖国内外文献资源',
    url: 'https://vpcs.cqvip.com/',
    icon: MapLocation,
    color: '#388E3C',
    tags: ['国际', '全面', '准确']
  },
  {
    id: 4,
    name: 'Turnitin',
    description: '国际权威学术不端检测系统，支持多语言',
    url: 'https://www.turnitin.com/',
    icon: Trophy,
    color: '#7B1FA2',
    tags: ['国际', '权威', '多语言']
  },
  {
    id: 5,
    name: 'PaperPass',
    description: '专业的论文查重平台，检测准确度高',
    url: 'https://www.paperpass.com/',
    icon: Star,
    color: '#F57C00',
    tags: ['专业', '准确', '快速']
  },
  {
    id: 6,
    name: '大雅相似度分析',
    description: '超星集团推出的论文检测系统',
    url: 'http://dsa.dayainfo.com/',
    icon: Promotion,
    color: '#0097A7',
    tags: ['免费', '便捷', '超星']
  }
])

// 定时器
let timer = null

// 更新时间
const updateTime = () => {
  currentTime.value = formatDateTime(new Date(), 'YYYY年MM月DD日 HH:mm:ss')
}

// 获取统计数据
const getStats = async () => {
  try {
    // 获取题目查重统计
    const titleStatsResponse = await getTitleCheckStats()
    const extractionStatsResponse = await getExtractionStats()
    
    let titleCheckTime = null
    let extractionTime = null
    let titleCheckDays = 0
    let extractionDays = 0
    
    if (titleStatsResponse.code === 200) {
      stats.value.titleCheckCount = titleStatsResponse.data.titleCheckCount || 0
      titleCheckTime = titleStatsResponse.data.lastCheckTime || null
      titleCheckDays = titleStatsResponse.data.lastCheckDays || 0
    }
    
    if (extractionStatsResponse.code === 200) {
      stats.value.extractionCount = extractionStatsResponse.data.extractionCount || 0
      extractionTime = extractionStatsResponse.data.lastCheckTime || null
      extractionDays = extractionStatsResponse.data.lastCheckDays || 0
    }
    
    // 选择最新的时间作为最近查重时间
    let latestTime = null
    let latestDays = 0
    let latestType = null
    
    if (titleCheckTime && extractionTime) {
      // 两个都有时间，选择最新的
      if (new Date(titleCheckTime) > new Date(extractionTime)) {
        latestTime = titleCheckTime
        latestDays = titleCheckDays
        latestType = 'title'
      } else {
        latestTime = extractionTime
        latestDays = extractionDays
        latestType = 'extraction'
      }
    } else if (titleCheckTime) {
      // 只有题目查重有时间
      latestTime = titleCheckTime
      latestDays = titleCheckDays
      latestType = 'title'
    } else if (extractionTime) {
      // 只有信息提取有时间
      latestTime = extractionTime
      latestDays = extractionDays
      latestType = 'extraction'
    } else {
      // 两个都没有时间
      latestTime = null
      latestDays = 0
      latestType = null
    }
    
    // 更新统计数据
    stats.value.lastCheckTime = latestTime
    stats.value.lastCheckDays = latestDays
    stats.value.lastCheckType = latestType
    
    // 论文查重使用模拟数据（因为相关功能未实现）
    stats.value.paperCheckCount = 3
    
    logStatsInfo(titleCheckTime, extractionTime, latestTime, latestType)
    
  } catch (error) {
    console.error('获取统计数据失败:', error)
    // 使用默认值
    stats.value = {
      titleCheckCount: 0,
      paperCheckCount: 3,
      extractionCount: 0,
      lastCheckDays: 0,
      lastCheckTime: null,
      lastCheckType: null
    }
  }
}

// 记录统计信息日志
const logStatsInfo = (titleTime, extractionTime, latestTime, latestType) => {
  console.log('统计信息详情:')
  console.log('题目查重时间:', titleTime ? formatDateTime(titleTime) : '无')
  console.log('信息提取时间:', extractionTime ? formatDateTime(extractionTime) : '无')
  console.log('最新查重时间:', latestTime ? formatDateTime(latestTime) : '无')
  console.log('最新查重类型:', latestType || '无')
  console.log('显示天数:', stats.value.lastCheckDays)
}

// 获取最近记录
const getRecentRecordsData = async () => {
  try {
    const response = await getRecentRecords({ limit: 5 })
    
    if (response.code === 200) {
      // 处理信息提取记录的文件名显示
      recentRecords.value = (response.data || []).map(record => {
        // 添加处理后的显示标题字段
        return {
          ...record,
          displayTitle: getDisplayTitle(record)
        }
      })
      console.log('处理后的最近记录:', recentRecords.value)
    } else {
      recentRecords.value = []
    }
    
  } catch (error) {
    console.error('获取最近记录失败:', error)
    recentRecords.value = []
  }
}

// 获取显示标题
const getDisplayTitle = (record) => {
  if (!record.title) {
    return '未知文件'
  }
  
  // 如果是信息提取记录
  if (record.type === 'extraction') {
    let title = record.title
    
    // 移除单独提取任务的后缀
    if (title.includes(' [basicInfo]') || 
        title.includes(' [keywords]') || 
        title.includes(' [abstract]') || 
        title.includes(' [references]')) {
      title = title.replace(/ \[(basicInfo|keywords|abstract|references)\]/, '')
    }
    
    // 检查是否是UUID格式的文件名（包含连字符的36位字符串）
    const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\.pdf$/i
    if (uuidRegex.test(title)) {
      return '论文信息提取'
    }
    
    // 如果是默认的未知文件名
    if (title === 'unknown.pdf' || title === '论文信息提取') {
      return '论文信息提取'
    }
    
    return title
  }
  
  // 题目查重记录直接返回标题
  return record.title
}

// 刷新记录
const refreshRecords = async () => {
  await getRecentRecordsData()
  await getStats()
  ElMessage.success('数据已刷新')
}

// 获取记录图标颜色
const getRecordIconColor = (type) => {
  const colorMap = {
    title: '#67C23A',
    paper: '#E6A23C',
    extraction: '#409EFF'
  }
  return colorMap[type] || '#909399'
}

// 获取记录类型文本
const getRecordTypeText = (type) => {
  const textMap = {
    title: '题目查重',
    paper: '论文查重',
    extraction: '信息提取'
  }
  return textMap[type] || '未知类型'
}

// 获取结果标签类型
const getResultTagType = (similarity) => {
  if (similarity === 0) return 'info'
  if (similarity < 15) return 'success'
  if (similarity < 30) return 'warning'
  return 'danger'
}

// 获取标签类型
const getTagType = (tag) => {
  const typeMap = {
    '权威': 'danger',
    '高校认可': 'success',
    '官方': 'primary',
    '可靠': 'info',
    '快速': 'warning',
    '国际': 'success',
    '全面': 'info',
    '准确': 'success',
    '多语言': 'warning',
    '专业': 'danger',
    '免费': 'success',
    '便捷': 'info',
    '超星': 'primary'
  }
  return typeMap[tag] || 'info'
}

// 打开外部网站
const openExternalWebsite = (url) => {
  window.open(url, '_blank')
  ElMessage.success('正在跳转到外部查重网站...')
}

// 快速题目查重
const quickTitleCheck = async () => {
  try {
    await ElMessageBox.confirm(
      '题目查重需要输入论文题目并进行详细设置，是否跳转到题目查重页面？',
      '快速题目查重',
      {
        confirmButtonText: '跳转页面',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    router.push('/student/title-check')
    
  } catch (error) {
    // 用户取消
  }
}

// 快速论文查重
const quickPaperCheck = async () => {
  try {
    await ElMessageBox.confirm(
      '快速论文查重需要上传PDF文件，是否跳转到论文查重页面？',
      '快速论文查重',
      {
        confirmButtonText: '跳转上传',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    router.push('/student/paper-check')
    
  } catch (error) {
    // 用户取消
  }
}

// 快速信息提取
const quickInfoExtraction = async () => {
  try {
    await ElMessageBox.confirm(
      '信息提取需要上传PDF文件，是否跳转到信息提取页面？',
      '快速信息提取',
      {
        confirmButtonText: '跳转上传',
        cancelButtonText: '取消',
        type: 'info'
      }
    )
    
    router.push('/student/info-extraction')
    
  } catch (error) {
    // 用户取消
  }
}

// 跳转到题目查重
const goToTitleCheck = () => {
  router.push('/student/title-check')
}

// 跳转到论文查重
const goToPaperCheck = () => {
  router.push('/student/paper-check')
}

// 跳转到信息提取
const goToInfoExtraction = () => {
  router.push('/student/info-extraction')
}

onMounted(() => {
  appStore.setPageTitle('学生仪表盘')
  appStore.setBreadcrumbs([
    { title: '学生中心', path: '/student' },
    { title: '仪表盘', path: '/student/dashboard' }
  ])
  
  updateTime()
  timer = setInterval(updateTime, 1000)
  
  getStats()
  getRecentRecordsData()
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
/* 样式保持不变 */
.student-dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.welcome-section {
  margin-bottom: 24px;
}

.welcome-card {
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.welcome-card :deep(.el-card__body) {
  padding: 2rem;
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-text h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  font-weight: 600;
}

.welcome-subtitle {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.current-time {
  margin: 0;
  font-size: 1rem;
  opacity: 0.8;
}

.welcome-avatar {
  flex-shrink: 0;
}

.stats-section {
  margin-bottom: 24px;
}

.quick-actions-card,
.recent-records-card,
.external-check-card,
.announcement-card {
  margin-bottom: 24px;
  border-radius: 12px;
  border: none;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.action-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-item:hover {
  border-color: #409EFF;
  background: #f0f9ff;
  transform: translateY(-2px);
}

.action-icon {
  flex-shrink: 0;
}

.action-content {
  flex: 1;
  min-width: 0;
}

.action-content h4 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.action-content p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.action-arrow {
  color: #c0c4cc;
  transition: color 0.3s ease;
}

.action-item:hover .action-arrow {
  color: #409EFF;
}

.records-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.record-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.record-icon {
  flex-shrink: 0;
}

.record-content {
  flex: 1;
  min-width: 0;
}

.record-content h4 {
  margin: 0 0 4px 0;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.record-content p {
  margin: 0;
  color: #909399;
  font-size: 12px;
}

.record-result {
  flex-shrink: 0;
}

.external-check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
}

.check-method-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fafafa;
}

.check-method-item:hover {
  border-color: #67C23A;
  background: #f0f9f4;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.1);
}

.method-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 8px;
  border: 1px solid #ebeef5;
}

.method-content {
  flex: 1;
  min-width: 0;
}

.method-content h4 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.method-content p {
  margin: 0 0 8px 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.4;
}

.method-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.method-action {
  flex-shrink: 0;
}

.announcements {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.announcement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-left: 4px solid #409EFF;
  background: #f0f9ff;
  border-radius: 4px;
}

.announcement-tag {
  flex-shrink: 0;
}

.announcement-title {
  flex: 1;
  color: #303133;
  font-size: 14px;
  font-weight: 500;
}

.announcement-time {
  flex-shrink: 0;
  color: #909399;
  font-size: 12px;
}

@media (max-width: 1200px) {
  .external-check-list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 992px) {
  .welcome-text h1 {
    font-size: 2rem;
  }
  
  .action-item {
    padding: 16px;
  }
  
  .check-method-item {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .welcome-text h1 {
    font-size: 1.5rem;
  }
  
  .action-item {
    padding: 12px;
  }
  
  .record-content h4 {
    max-width: 150px;
  }
  
  .announcement-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .external-check-list {
    grid-template-columns: 1fr;
  }
  
  .check-method-item {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .method-content {
    text-align: center;
  }
  
  .method-tags {
    justify-content: center;
  }
}
/* 如果需要进一步调整，可以添加以下样式 */
.stats-section {
  margin-bottom: 24px;
}

:deep(.result-card) {
  height: 100%;
}

:deep(.result-card .el-card__body) {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>